<template>
  <view
    :style="themeColor()"
    class="bg-[var(--page-bg-color)] min-h-[100vh] overflow-hidden"
  >
    <view v-if="!loading">
      <view
        :style="{
          background:
            'url(' +
            img('addon/shop_fenxiao/index/header_bg.png') +
            ') left top / 100% 100% no-repeat',
        }"
      >
        <!-- #ifdef MP-WEIXIN || APP-PLUS -->
        <top-tabbar
          :data="param"
          class="top-header"
          :scrollBool="topTabarObj.getScrollBool()"
        />
        <!-- #endif -->
        <view
          class="box-border px-[var(--sidebar-m)] pt-[44rpx] mb-[40rpx] flex flex-col justify-between"
        >
          <view class="flex items-center">
            <view
              class="!w-[100rpx] !h-[100rpx] rounded-full flex-shrink-0 overflow-hidden"
            >
              <u-avatar
                v-if="info?.headimg"
                :default-url="img('static/resource/images/default_headimg.png')"
                :src="img(info?.headimg)"
                size="100rpx"
                leftIcon="none"
              />
              <u-avatar
                v-else
                :src="img('static/resource/images/default_headimg.png')"
                size="100rpx"
                leftIcon="none"
              />
            </view>
            <view class="flex flex-col text-[#303133] ml-[32rpx]">
              <view
                class="text-[30rpx] font-500 leading-[1.4] truncate max-w-[520rpx]"
                >{{ info?.username }}</view
              >
            </view>
          </view>
        </view>
      </view>

      <view
        class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[30rpx]"
      >
        <view
          class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid"
        >
          <text class="text-[30rpx] font-500">{{ t("billingInformation") }}</text>
          <view
            v-if="btnShow"
            class="text-[var(--text-color-light6)] text-[26rpx]"
            @click="toList"
          >
            <text>绿色积分明细</text>
            <text
              class="nc-iconfont nc-icon-youV6xx text-[var(--text-color-light9)] ml-[2rpx] !text-[24rpx]"
            ></text>
          </view>
        </view>
        <view class="pt-[30rpx] px-[24rpx] grid grid-cols-2">
          <view
            class="border-0 border-r-[2rpx] border-[var(--temp-bg)] border-solid text-center"
          >
            <view>{{ t("commissionGet") }}</view>
            <view>{{ total }}</view>
          </view>
          <view class="text-center">
            <view>{{ t("contributionPoint") }}</view>
            <view>{{ moneyFormat(info?.contribution_points) }}</view>
          </view>
        </view>
      </view>

      <view
        class="commission-bg sidebar-margin my-[var(--top-m)] rounded-[var(--rounded-big)] pb-[40rpx]"
      >
        <view
          class="flex justify-between py-[30rpx] px-[24rpx] items-center border-0 border-b-[2rpx] border-[var(--temp-bg)] border-solid"
        >
          <text class="text-[30rpx] font-500">{{ t("pointDesc") }}</text>
        </view>
        <view class="flex justify-between pt-[30rpx] px-[24rpx] items-center border-0">
          <text class="text-[26rpx] text-[#999]" style="line-height: 50rpx;">{{ t('pointContent') }}</text>
        </view>
      </view>
    </view>
    <loading-page :loading="loading" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { onShow } from "@dcloudio/uni-app";
import useMemberStore from '@/stores/member'
import { moneyFormat, img, redirect } from "@/utils/common";
import { t } from "@/locale";
import { getDistributorPoint } from "@/app/api/member";
import { topTabar } from "@/utils/topTabbar";
const memberStore = useMemberStore()

/********* 自定义头部 - start ***********/
const topTabarObj = topTabar();
let param = topTabarObj.setTopTabbarParam({
  title: "绿色积分",
  topStatusBar: { textColor: "#333" },
});

/********* 自定义头部 - end ***********/

const loading = ref<boolean>(true);
const total = ref<number>(0);

//个人信息
const info = computed(() => {
  return memberStore.info;
})

const btnShow = computed(() => {
    return memberStore.buttonAuth.divvy_point || false;
})

onShow(() => {
  getTotal();
});

// 获取总绿色积分
const getTotal = () => {
  loading.value = true;
  getDistributorPoint().then((res: any) => {
    total.value = res.data;
    loading.value = false;
  }).catch(() => {
    loading.value = false;
  });
};

// 跳转绿色积分列表
const toList = () => {
  redirect({ url: "/app/pages/member/divvy_detail", mode: "navigateTo" });
}

</script>

<style lang="scss" scoped>
.commission-bg {
  background: #ffffff;
}

.team-bg {
  background: linear-gradient(135deg, #fff9f9 10%, #ffffff 40%, #ffffff 100%);
}
</style>
